<template>
  <div class="pc-detail-container">
    <!-- 顶部导航 -->
    <div class="header">
      <el-button :icon="ArrowLeft" @click="goBack" class="back-btn"></el-button>
            <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/category/' }">文物主体管理</el-breadcrumb-item>
        <el-breadcrumb-item :to="{
          path: '/mainpage/',
          query: {
            categoryid: categaryid,
            categoryname: categaryname
          }
        }">{{ categaryname }}</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '' }">{{currentRelicname}}</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '' }">文物详情</el-breadcrumb-item>
      </el-breadcrumb>

      <h1 class="title"></h1>
      <el-button type="primary" :icon="Edit" @click="goToEdit" class="edit-btn">编辑</el-button>
    </div>

    <!-- 内容容器 -->
    <div class="content-wrapper">
      <!-- 加载状态 -->
      <div v-if="loading" class="state-container loading-state">
        <div class="state-text">加载中...</div>
      </div>

      <!-- 错误状态 -->
      <div v-else-if="error" class="state-container error-state">
        <el-empty description="加载失败，请重试" image="error">
          <template #bottom>
            <el-button type="primary" @click="fetchRelicData">重试</el-button>
          </template>
        </el-empty>
      </div>

      <!-- 无数据状态 -->
      <div v-else-if="!currentRelic" class="state-container empty-state">
        <el-empty description="暂无文物数据" />
      </div>

      <!-- 详情内容 -->
      <div v-else class="detail-content">
        <!-- 文物主图 -->
      <el-card class="info-card main-image-card">
        <div class="card-header">
          <el-icon><Picture /></el-icon>
          <span class="card-title">名称:{{ currentRelic.name || '未知' }}</span>
        </div>
        <div class="image-content">
          <div class="left-side">
            <el-image
              :src="currentRelic.image_base64 || currentRelic.image"
              fit="contain"
              class="main-image"
              :preview-src-list="[currentRelic.image_base64 || currentRelic.image]"
              :preview-teleported="true"
              @error="handleImageError('主图')"
            >
              <template #error>
                <div class="image-error">
                  <el-icon><PictureFilled /></el-icon>
                  <span>主图加载失败</span>
                </div>
              </template>
            </el-image>
            <div v-if="currentRelic.image" class="download-btns">
              <el-button
                type="success"
                size="small"
                :icon="Download"
                @click="handleDownloadImage('image', currentRelic.id, currentRelic.image, '0')"
                class="download-original-btn"
              >
                下载原图
              </el-button>
            </div>
          </div>
          <div class="right-side">
            <!-- 标题 -->
            <div class="info-label1" style="font-size: 1.2em; margin-bottom: 10px;">
              彩画做法描述
            </div>
            <!-- 多行文本框 -->
            <textarea
              class="info-value multiline-textbox"
              rows="6"
              readonly
              :value="currentRelic.painting_technique || '未知'"
            ></textarea>
          </div>
        </div>
      </el-card>

      <!-- 基本信息 -->
      <el-card class="info-card">
        <div class="card-header">
          <el-icon><InfoFilled /></el-icon>
          <span class="card-title">基本信息</span>
        </div>

        <div class="info-list">
          <!-- 彩画主题 -->
          <div class="info-item">
            <span class="info-label">彩画主题：</span>
            <span class="info-value">{{ currentRelic.painting_theme || '未知' }}</span>
          </div>

          <!-- 纹样类型 -->
          <div class="info-item">
            <span class="info-label">纹样类型：</span>
            <span class="info-value">
              {{ currentRelic.pattern_types}}
            </span>
          </div>

          <!-- 构图形式 -->
          <div class="info-item">
            <span class="info-label">构图形式：</span>
            <span class="info-value">
              {{ currentRelic.composition_style}}
            </span>
          </div>

          <!-- 主色调 -->
          <div class="info-item">
            <span class="info-label">主色调：</span>
            <span class="info-value">
              {{ currentRelic.dominant_colors}}
            </span>
          </div>
        </div>
      </el-card>

      <!-- 病害情况 -->
      <el-card class="info-card">
        <div class="card-header">
          <el-icon><WarningFilled /></el-icon>
          <span class="card-title">病害情况</span>
        </div>
          <!-- 病害类型 -->
           <div class="info-list">
            <div class="info-item">
              <div class="info-label">病害类型：</div>
              <div class="info-value">{{ currentRelic.disease_types}}</div>
            </div>
          <!-- 病害程度 -->
            <div class="info-item">
              <div class="info-label">病害程度：</div>
              <div class="info-value">{{diseaseSeverityText}}</div>
            </div>
          </div>
          <!-- 人为污染详情 -->
          <div
            v-if="currentRelic.disease_types?.includes('人为污染') && currentRelic.human_pollution_details"
            class="info-item"
          >
            <div class="info-label">人为污染详情</div>
            <div class="info-value">{{ currentRelic.human_pollution_details }}</div>
          </div>
          <!-- 其他污染详情 -->
          <div
            v-if="currentRelic.disease_types?.includes('其他污染') && currentRelic.other_pollution_details"
            class="info-item"
          >
            <div class="info-label">其他污染详情</div>
            <div class="info-value">{{ currentRelic.other_pollution_details }}</div>
          </div>
      </el-card>
      <el-card
        class="info-card">
          <div class="card-header">
          <el-icon><Document /></el-icon>
          <span class="card-title">现状与残损情况</span>
        </div>
          <div class="info-grid1">
          <div class="info-item1 full-width">
            <!-- 使用 textarea 替代 div 来展示多行文本 -->
            <textarea
              class="info-value-textarea"
              readonly
              :value="currentRelic.current_damage_status || '未知'"
            ></textarea>
          </div>
        </div>
        <div class="card-header" v-if="currentRelic.disease_images && currentRelic.disease_images.length > 0">
          <el-icon><WarningFilled /></el-icon>
          <span class="card-title">状态图像 </span>
          <span class="image-count">{{ currentRelic.disease_images.length }}张</span>

          <!-- 比对按钮 -->
          <el-button
            type="primary"
            @click="submitComparison"
            :disabled="selectedImageIds.length !== 2"
            class="compare-btn"
            :loading="comparing"
          >
            比对选中图片
          </el-button>
        </div>

        <!-- 病害图片网格（带勾选功能） -->
        <!-- 病害图片列表（表格形式） -->
        <el-table
          :data="currentRelic.disease_images"
          @selection-change="handleSelectionChange"
          style="width: 100%; margin-top: 10px"
          :row-key="row => row.id"
          stripe
        >
          <!-- 多选列 -->
          <el-table-column type="selection" width="55" align="center" />

          <!-- 图片预览列 -->
          <el-table-column label="图片预览" width="180" align="center">
            <template #default="{ row }">
              <el-image
                :src="row.image_base64 || row.image_url"
                fit="contain"
                class="table-image-preview"
                :preview-src-list="[row.image_base64 || row.image_url]"
                :preview-teleported="true"
                @error="handleImageError(`病害图-${row.id}`)"
              >
                <template #error>
                  <div class="image-error-small">
                    <el-icon><PictureFilled /></el-icon>
                  </div>
                </template>
              </el-image>
            </template>
          </el-table-column>

          <!-- 图片名称 -->
          <el-table-column prop="image_name" label="图片名称" min-width="160">
            <template #default="{ row }">
              {{ row.image_name || '未命名' }}
            </template>
          </el-table-column>

          <!-- 描述 -->
          <el-table-column prop="image_description" label="图片描述" min-width="200">
            <template #default="{ row }">
              {{ row.image_description || '暂无描述' }}
            </template>
          </el-table-column>

          <!-- 上传时间 -->
          <el-table-column prop="created_at" label="上传时间" width="160">
            <template #default="{ row }">
              {{ formatDate(row.created_at) }}
            </template>
          </el-table-column>

          <!-- 操作列：下载 -->
          <el-table-column label="操作" width="120" align="center">
            <template #default="{ row }">
              <el-button
                type="success"
                size="small"
                :icon="Download"
                @click="handleDownloadImage('disease_image', currentRelic.id, row.image_url, row.id)"
                plain
              >
                下载
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 提示文字 -->
        <div v-if="currentRelic.disease_images?.length === 0" class="empty-images">
          <el-empty description="暂无病害图片" />
        </div>

        <!-- 比对结果展示区域（在图片下方） -->
        <div v-if="showComparisonResult" class="comparison-result-container">
          <div class="result-header">
            <el-icon><InfoFilled /></el-icon>
            <span class="result-title">比对结果</span>
            <el-button type="primary" @click="resetComparison" plain class="reset-btn">重新选择</el-button>
          </div>

          <!-- 相似度信息 -->
          <div class="similarity-info">
            <span class="similarity-label">相似度：</span>
            <span class="similarity-value">{{ comparisonResult.similarity }}%</span>
            <el-progress
              :percentage="comparisonResult.similarity"
              stroke-width="6"
              class="similarity-progress"
            />
          </div>

          <!-- 图片对比展示 -->
          <div class="comparison-images">
            <div class="comparison-image-item">
              <p>选中图片1</p>
              <el-image
                :src="getImageUrlById(selectedImageIds[0])"
                fit="contain"
                class="compared-image"
                :preview-src-list="[getImageUrlById(selectedImageIds[0])]"
                :preview-teleported="true"
              />
            </div>
            <div class="comparison-image-item">
              <p>选中图片2</p>
              <el-image
                :src="getImageUrlById(selectedImageIds[1])"
                fit="contain"
                class="compared-image"
                :preview-src-list="[getImageUrlById(selectedImageIds[1])]"
                :preview-teleported="true"
              />
            </div>
            <div class="comparison-image-item diff-image">
              <p>差异标注图</p>
              <el-image
                :src="comparisonResult.diffImageUrl"
                fit="contain"
                class="compared-image"
                :preview-src-list="[comparisonResult.diffImageUrl]"
                :preview-teleported="true"
                @error='showToastMessage("error","差异图加载失败")'
              />
            </div>
          </div>
        </div>
      </el-card>

        <!-- 光谱与三维数据 -->
        <el-card class="info-card">
          <div class="card-header">
            <el-icon><Files /></el-icon>
            <span class="card-title">数据文件</span>
          </div>
          <div class="file-list">
            <!-- 光谱数据 -->
            <div v-if="currentRelic.hasSpectrum && currentRelic.spectrum_file_url" class="file-item">
              <el-icon class="file-icon"><Files /></el-icon>
              <div class="file-info">
                <div class="file-name">光谱数据文件</div>
                <div class="file-meta">
                  <span class="file-size">{{ formatFileSize(currentRelic.spectrum_file_size) }}</span>
                  <span class="file-date">{{ formatDate(currentRelic.spectrum_uploaded_at) }}</span>
                </div>
              </div>
              <el-button
                type="primary"
                size="small"
                :icon="Download"
                @click="handleDownload('spectrum', currentRelic.id, currentRelic.spectrum_file_name)"
                class="download-btn"
              >
                下载
              </el-button>
            </div>

            <!-- 三维数据 -->
            <div v-if="currentRelic.hasThreeD && currentRelic.threeD_file_url" class="file-item">
              <el-icon class="file-icon"><Files /></el-icon>
              <div class="file-info">
                <div class="file-name">三维数据文件</div>
                <div class="file-meta">
                  <span class="file-size">{{ formatFileSize(currentRelic.threeD_file_size) }}</span>
                  <span class="file-date">{{ formatDate(currentRelic.threeD_uploaded_at) }}</span>
                </div>
              </div>
              <el-button
                type="primary"
                size="small"
                :icon="Download"
                @click="handleDownload('3d', currentRelic.id, currentRelic.threeD_file_name)"
                class="download-btn"
              >
                下载
              </el-button>
              <el-button
                type="success"
                size="small"
                :icon="View"
                @click="showPointCloud = true"
                class="view-btn"
              >
                显示点云
              </el-button>
            </div>

            <!-- 无文件提示 -->
            <div v-if="!currentRelic.hasSpectrum && !currentRelic.hasThreeD" class="no-files">
              <el-empty description="暂无数据文件" />
            </div>
          </div>
        </el-card>

        <!-- 时间信息 -->
        <el-card class="info-card">
          <div class="card-header">
            <el-icon><Clock /></el-icon>
            <span class="card-title">时间信息</span>
          </div>
          <div class="time-info">
            <div class="time-item">
              <div class="info-label1">创建时间</div>
              <div class="info-value1">{{ formatDate(currentRelic.created_at) || '未知' }}</div>
            </div>
            <div class="time-item" v-if="currentRelic.last_modified_at">
              <div class="info-label1">最后修改</div>
              <div class="info-value1">{{ formatDate(currentRelic.last_modified_at) }}</div>
            </div>
          </div>
        </el-card>
      </div>
    </div>

    <!-- 三维点云预览弹窗 -->
    <el-dialog
      v-model="showPointCloud"
      title="三维点云预览"
      width="90%"
      :close-on-click-modal="false"
      :destroy-on-close="true"
    >
      <template #default>
        <point-cloud-viewer :relic-id="currentRelic.id" />
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { useRelicDetail } from '@/components/composables/useRelicDetail'
import {
  ArrowLeft,
  Edit,
  InfoFilled,
  Picture,
  WarningFilled,
  Document,
  Files,
  Download,
  Clock,
  Delete,
  PictureFilled,
  View,
  ArrowRight,
} from '@element-plus/icons-vue'
import { ElLoading } from 'element-plus'
import { onMounted, ref } from 'vue'
import myaxios from '@/auth/auth.service.js'
import PointCloudViewer from '@/components/pc/PointCloudViewer.vue'
import {  Check } from '@element-plus/icons-vue' // 新增眼睛图标
import { showToastMessage } from '@/utils/message'

// 点云弹窗状态
const showPointCloud = ref(false)

// 使用数据逻辑
const {
  loading,
  error,
  currentRelic,
  currentRelicname,
  categaryid,
  categaryname,
  diseaseSeverityText,
  fetchRelicData,
  getBuildingTypeText,
  formatDate,
  goBack,
  goToEdit,
  handleDeleteImage,
} = useRelicDetail()

// 页面加载时获取数据
onMounted(() => {
  if (!currentRelic.value && !loading.value && !error.value) {
    fetchRelicData()
  }
})
// 图片错误处理
const handleImageError = (type: string) => {
  showToastMessage("error","`${type}加载失败`")
}

// 下载文件
const handleDownload = async (fileType: string, relicId: number, filename: string) => {
  const loadingInstance = ElLoading.service({
    lock: true,
    text: '准备下载...',
    background: 'rgba(0, 0, 0, 0.1)',
  })
  try {
    await myaxios.downloadFile(fileType, relicId, filename.split('.')[0])
  } catch (err) {
    console.error('下载失败', err)
  } finally {
    loadingInstance.close()
  }
}

// 下载图片
const handleDownloadImage = async (
  fileType: string,
  relicId: number,
  fileurl: string,
  imageId: string
) => {
  const loadingInstance = ElLoading.service({
    lock: true,
    text: '准备下载...',
    background: 'rgba(0, 0, 0, 0.1)',
  })
  const filename = decodeURIComponent(fileurl.split('/').pop() || 'image.jpg')
  try {
    await myaxios.downloadFile(fileType, relicId, filename, imageId)
  } catch (err) {
    console.error('图片下载失败', err)
  } finally {
    loadingInstance.close()
  }
}

// 格式化文件大小
const formatFileSize = (size?: number) => {
  if (!size) return '未知大小'
  const units = ['B', 'KB', 'MB', 'GB']
  let i = 0
  let s = size
  while (s >= 1024 && i < units.length - 1) {
    s /= 1024
    i++
  }
  return `${s.toFixed(2)} ${units[i]}`
}


// 通用数组字段格式化（用于纹样、构图、色调等）
const formatArrayField = (array: string[] | undefined, other: string | undefined) => {
  if (!array || array.length === 0) return '未知'
  const items = [...array]
  if (array.includes('other') && other) {
    items.pop() // 移除 'other'
    items.push(...other.split(',').map(s => s.trim()).filter(Boolean))
  }
  return items.length > 0 ? items.join('、') : '未知'
}

// 病害类型特殊处理（含人为污染详情）
const formatDiseaseTypes = (types: string[] | undefined, relic: any) => {
  if (!types || types.length === 0) return '未知'
  const displayTypes = [...types]
  // 人为污染和“其他污染”不单独显示label
  return displayTypes.filter(t => t !== '人为污染' && t !== '其他污染').join('、') || '未知'
}

// 新增：比对相关状态
const selectedImageIds = ref<number[]>([]) // 选中的图片ID
const comparing = ref(false) // 比对中状态
const showComparisonResult = ref(false) // 控制结果区域显示
const comparisonResult = ref<{
  similarity: number
  diffImageUrl: string
} | null>(null)

// 表格选择变化时触发
const handleSelectionChange = (selection: any[]) => {
  selectedImageIds.value = selection.map(item => item.id)
  showComparisonResult.value = false // 选择变化时隐藏旧结果
}

// 图片选择逻辑
const toggleImageSelection = (imageId: number) => {
  // 取消选中
  // if (selectedImageIds.value.includes(imageId)) {
  //   selectedImageIds.value = selectedImageIds.value.filter((id) => id !== imageId)
  //   showComparisonResult.value = false // 取消选择后隐藏结果
  //   return
  // }
  // 限制最多选择2张
  if (selectedImageIds.value.length < 2) {
    selectedImageIds.value.push(imageId)
  } else {
    showToastMessage("warning","最多只能选择2张图片进行比对")
  }
}

// 判断图片是否选中
const isImageSelected = (imageId: number) => {
  return selectedImageIds.value.includes(imageId)
}

// 提交比对请求
const submitComparison = async () => {
  if (selectedImageIds.value.length !== 2) {
    showToastMessage("warning","请选择2张图片进行比对")
    return
  }

  comparing.value = true
  try {
    // 调用后端比对接口
    const response = await myaxios.compareDiseaseImages({
      relic_id: currentRelic.value.id,
      image_ids: selectedImageIds.value,
    })

    // 保存比对结果
    comparisonResult.value = {
      similarity: response.data.similarity,
      diffImageUrl: response.data.diff_image_base64,
    }
    // 显示结果区域
    showComparisonResult.value = true
  } catch (error) {
    console.error('比对失败', error)
    showToastMessage("error","比对失败，请重试")
  } finally {
    comparing.value = false
  }
}

// 重置比对状态
const resetComparison = () => {
  selectedImageIds.value = []
  showComparisonResult.value = false
  comparisonResult.value = null
}

// 根据ID获取图片URL
const getImageUrlById = (imageId: number) => {
  const image = currentRelic.value.disease_images.find((img: any) => img.id === imageId)
  return image ? image.image_base64 || image.image_url : ''
}

</script>

<style scoped>
/* 基础样式 */
.pc-detail-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}
.header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e8e8e8;
}
.back-btn { margin-right: 15px; }
.title { flex: 1; margin: 0; font-size: 22px; color: #333; font-weight: 600; }
.edit-btn { white-space: nowrap; }
.content-wrapper { max-width: 1200px; margin: 0 auto; }

/* 卡片样式 */
.info-card { background-color: #fff; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); overflow: hidden; }
.card-header {
  display: flex;
  align-items: center;
  padding: 14px 20px;
  background-color: #f5f7fa;
  border-bottom: 1px solid #eee;
}
.card-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-left: 8px;
}

/* 信息网格 */
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 15px;
  padding: 20px;
}
.info-item {
  padding: 10px 12px;
  background-color: #f9f9f9;
  border-radius: 6px;
  border-left: 3px solid #409eff;
  width: 100%;
}
.info-item.full-width { grid-column: span 2; width: 100%;}
.info-label1 { font-size: 12px; color: #888; margin-bottom: 5px; font-weight: 500; }
.info-value1 { font-size: 14px; color: #333; font-weight: 500; }

/* 图像内容 */
/* 图像内容 */
.image-content {
  padding: 20px;
  text-align: center;
  background-color: #fafafa;
  display: flex;           /* 启用Flexbox */
  justify-content: center; /* 子元素水平居中 */
  align-items: center;     /* 子元素垂直居中（如果需要的话） */
  gap: 10px;               /* 子元素之间的间隔 */
}

/* 如果需要让子元素之间保持固定的间隔，同时在顶部和底部没有额外的间隔，可以使用如下样式 */
.image-content > *:first-child {
  margin-top: auto;        /* 将第一个子元素推向中间 */
}
.image-content > *:last-child {
  margin-bottom: auto;     /* 将最后一个子元素推向中间 */
}
.main-image {
  max-width: 100%;
  max-height: 400px;
  border-radius: 4px;
}
.image-error {
  width: 100%;
  height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #f5f5f5;
  color: #999;
  border-radius: 4px;
}

/* 文件列表 */
.file-list { padding: 15px 20px; }
.file-item {
  display: flex;
  align-items: center;
  padding: 12px;
  background-color: #f9f9f9;
  border-radius: 6px;
  margin-bottom: 12px;
}
.file-icon { color: #409eff; font-size: 20px; margin-right: 15px; }
.file-info { flex: 1; }
.file-name { font-size: 14px; font-weight: 500; color: #333; margin-bottom: 4px; }
.file-meta { font-size: 12px; color: #888; }
.download-btn { margin-left: 10px; }
.view-btn { margin-left: 10px; }

/* 时间信息 */
.time-info {
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.time-item { min-width: 250px; flex: 1; }

/* 图像网格 */
.images-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  padding: 12px 0;
}
.section-title { margin: 0 0 15px 0; font-size: 16px; font-weight: 500; color: #333; }
.image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}
.image-item {
  position: relative;
  border: 1px solid #ebeef5;
  border-radius: 8px;
  overflow: hidden;
}
.disease-image {
  width: 100%;
  height: 180px;
  object-fit: contain;
  background-color: #f5f7fa;
}
.image-actions {
  padding: 8px;
  text-align: center;
  background-color: #fafafa;
  border-top: 1px solid #ebeef5;
}

/* 响应式 */
@media (max-width: 768px) {
  .info-grid, .image-grid { grid-template-columns: 1fr; }
  .title { font-size: 18px; }
  .main-image, .disease-image { max-height: 300px; }
}
.info-card {
  display: flex;
  flex-direction: column;
}

.card-header {
  display: flex;
  align-items: center;
  padding: 10px;
}

.image-content {
  display: flex;
  justify-content: space-between;
}

.left-side {
  text-align: center;
  width: 40%;
  height: 40%;
}

.main-image {
  max-width: 100%;
  margin-bottom: 10px;
}

.download-btns {
  margin-top: 10px;
}

.right-side {
  width: 60%; /* 可以根据需要调整宽度 */
  padding-left: 20px; /* 可以根据需要调整间距 */
  padding-top: 20px;
}

.info-item {
  margin-bottom: 10px;
  align-items: center; /* 垂直居中 */
}

.info-label {
  font-weight: bold;
}

.info-value {
  margin-left: 10px;
}
.right-side {
  width: 50%; /* 可以根据需要调整宽度 */
  padding-left: 0px; /* 可以根据需要调整间距 */
  padding-right: 80px; /* 可以根据需要调整间距 */
}

.multiline-textbox {
  width: 100%;
  height: 130px;
  resize: none; /*禁止用户手动调整大小 */
  padding: 10px;
  font-family: Arial, sans-serif;
  font-size: 1em;
  border: 1px solid #DCDFE6;
  border-radius: 4px;
  background-color: #FFF;
  color: #606266;
}
.image-checkbox {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  background: white;
  border-radius: 50%;
  border: 2px solid #ddd; /* 默认灰色边框 */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  z-index: 10;
  transition: all 0.2s ease;
}

/* 选中状态下背景和边框变蓝 */
.image-checkbox.selected {
  background-color: #409eff;
  border-color: #409eff;
}

/* 图标颜色也设为白色 */
.image-checkbox.selected .check-icon {
  color: white;
}
/* 比对按钮位置 */
.compare-btn {
  margin-left: auto;
}
.info-card {
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  background-color: #f5f7fa;
  border-bottom: 1px solid #ebeef5;
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.card-header .el-icon {
  margin-right: 8px;
  color: #409eff;
}

/* 信息列表：纵向排列 */
.info-list {
  padding: 20px;
  line-height: 2.2;
  font-size: 14px;
  color: #606266;
}

.info-item {
  display: flex;
  /* 每一项左对齐，标签与内容对齐 */
}

.info-label {
  flex: 0 0 100px; /* 固定标签宽度，可调 */
  font-weight: 500;
  color: #303133;
  text-align: right;
  margin-right: 12px;
}

.info-value {
  flex: 1;
  color: #606266;
  word-break: break-word;
  line-height: 1.5;
}

/* 如果内容过长，自动换行 */
.info-value {
  white-space: pre-wrap;
}
/* 设置多行文本框的样式 */
.info-value-textarea {
  width: 100%;
  padding: 8px;
  font-size: 14px; /* 可根据实际情况调整 */
  line-height: 1.5;
  color: #606266;
  background-color: #fff;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  box-sizing: border-box;
  resize: none; /* 禁止用户调整大小 */
  min-height: 100px; /* 根据内容和设计需求设定最小高度 */
}

/* 当处于只读状态时的样式 */
.info-value-textarea[readonly] {
  background-color: #f5f7fa; /* 或者选择一个适合只读状态的颜色 */
  cursor: default;
  border-color: #e4e7ed
}
.info-item1{
  margin-top: 5px;
  margin-bottom: 5px;
  border-left: 3px solid #409eff;
  border-radius: 4px; /* 添加圆角 */
}
/* 比对结果区域样式 */
.comparison-result-container {
  margin-top: 20px;
  padding: 15px;
  border-top: 1px dashed #e8e8e8;
  animation: fadeIn 0.3s ease;
}

.result-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.result-title {
  font-size: 16px;
  font-weight: 600;
  margin-left: 8px;
  color: #333;
}

.reset-btn {
  margin-left: auto;
  /* color: #666; */
}
/* 相似度信息样式 */
.similarity-info {
  margin-bottom: 20px;
  padding: 10px;
  background-color: #f5f7fa;
  border-radius: 6px;
}

.similarity-label {
  display: inline-block;
  width: 80px;
  font-weight: 500;
}

.similarity-value {
  font-size: 18px;
  font-weight: 600;
  color: #409eff;
  margin-right: 15px;
}

.similarity-progress {
  margin-top: 10px;
  width: 500px;
  max-width: 100%;
}

/* 对比图片展示区域 */
.comparison-images {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 20px;
}

.comparison-image-item {
  flex: 1;
  min-width: 250px;
  max-width: 400px;
}

.comparison-image-item p {
  text-align: center;
  margin-bottom: 10px;
  font-weight: 500;
  color: #666;
}

.compared-image {
  width: 100%;
  height: 250px;
  object-fit: contain;
  background-color: #f9f9f9;
  border-radius: 6px;
}

.diff-image {
  border: 2px solid #fa541c;
}

/* 动画效果 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.images-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  padding: 12px 0;
}

/* 表格内图片预览样式 */
.table-image-preview {
  width: 100px;
  height: 80px;
  object-fit: contain;
  background-color: #f5f7fa;
  border-radius: 4px;
  cursor: zoom-in;
}

.image-error-small {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 80px;
  background-color: #f0f0f0;
  color: #999;
  font-size: 12px;
}

/* 空状态样式 */
.empty-images {
  padding: 20px 0;
  text-align: center;
}
</style>
